<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />		
		<title>“组团啦”杯人气投票</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"/>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/public.css" />
		<style type="text/css">
			html,body{height:100%;}
			body{background-image: url(img/bg.jpg); background-size: 100% 100%;}
		</style>
	</head>
	<body>
		<ul class="select-menu" id="select-menu">
			<li><a href="javascript:;"><span>战队</span></a></li>
			<li><a href="javascript:;"><span id="position-select">位置</span></a></li>
			<li><a href="javascript:;"><span id="gender-select">性别</span></a></li>
			<div id="menu-box">
				<div class="menu-wrapper" id="team">
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
					<div><span>DGM</span></div>
				</div>
				<div class="menu-wrapper" id="position">
					<div><span>中单</span></div>
					<div><span>下单</span></div>
					<div><span>打野</span></div>
					<div><span>辅助</span></div>
					<div><span>射手</span></div>
				</div>
				<div class="menu-wrapper" id="gender">
					<div><span>萌妹子</span></div>
					<div><span>纯爷们</span></div>
					<div><span>非直男</span></div>					
				</div>
			</div>
		</ul>
		<div id="or-wrapper" class="center-block">
			<div class="prize center-block margin-bottom-10">
				<!--有名次-->
				<div><img src="img/cup-gold.png" alt="" width="100%"/></div>
				<!--无名次-->
				<!--<div></div>-->				
				<p>NO.01</p>
				<dl>
					<dt>DGM</dt>
					<dd>生死看淡，不服就GAN</dd>
				</dl>
			</div>
			<div class="row margin-bottom-15 or-item">
				<div class="portrait-wrapper col-xs-3">
					<img src="img/portrait2.jpg" alt=""  class="portrait beblock beCircle"  width="100%"/>
				</div>
				<ul class="data-wrapper col-xs-6">
					<li><span class="name">丰田</span>中单</li>
					<li>GNM-第二项资料</li>
					<li>中国地质大学</li>
				</ul>
				<div class="bS-wrapper col-xs-3">
					<dl class="btn-support beCircle" >
						<dt>支持TA</dt>
						<dd>150</dd>
					</dl>
				</div>
			</div>
			<div class="row margin-bottom-15 or-item">
				<div class="portrait-wrapper col-xs-3">
					<img src="img/portrait2.jpg" alt=""  class="portrait beblock beCircle"  width="100%"/>
				</div>
				<ul class="data-wrapper col-xs-6">
					<li><span class="name">丰田</span>中单</li>
					<li>GNM-第二项资料</li>
					<li>中国地质大学</li>
				</ul>
				<div class="bS-wrapper col-xs-3">
					<dl class="btn-support beCircle" >
						<dt>支持TA</dt>
						<dd>150</dd>
					</dl>
				</div>
			</div>
			<div class="row margin-bottom-15 or-item">
				<div class="portrait-wrapper col-xs-3">
					<img src="img/portrait2.jpg" alt=""  class="portrait beblock beCircle"  width="100%"/>
				</div>
				<ul class="data-wrapper col-xs-6">
					<li><span class="name">丰田</span>中单</li>
					<li>GNM-第二项资料</li>
					<li>中国地质大学</li>
				</ul>
				<div class="bS-wrapper col-xs-3">
					<dl class="btn-support beCircle" >
						<dt>支持TA</dt>
						<dd>150</dd>
					</dl>
				</div>
			</div>
			<div class="row margin-bottom-15 or-item">
				<div class="portrait-wrapper col-xs-3">
					<img src="img/portrait2.jpg" alt=""  class="portrait beblock beCircle"  width="100%"/>
				</div>
				<ul class="data-wrapper col-xs-6">
					<li><span class="name">丰田</span>中单</li>
					<li>GNM-第二项资料</li>
					<li>中国地质大学</li>
				</ul>
				<div class="bS-wrapper col-xs-3">
					<dl class="btn-support beCircle" >
						<dt>支持TA</dt>
						<dd>150</dd>
					</dl>
				</div>
			</div>
			<div class="row margin-bottom-15 or-item">
				<div class="portrait-wrapper col-xs-3">
					<img src="img/portrait2.jpg" alt=""  class="portrait beblock beCircle"  width="100%"/>
				</div>
				<ul class="data-wrapper col-xs-6">
					<li><span class="name">丰田</span>中单</li>
					<li>GNM-第二项资料</li>
					<li>中国地质大学</li>
				</ul>
				<div class="bS-wrapper col-xs-3">
					<dl class="btn-support beCircle" >
						<dt>支持TA</dt>
						<dd>150</dd>
					</dl>
				</div>
			</div>
		</div>
		<div id="click-area"></div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var sItem=$("#select-menu li"),lh,ob,sM=$("#select-menu"),
				orW=$("#or-wrapper"),pW=document.querySelector(".portrait").offsetWidth,support=$(".btn-support");
			$(".portrait").css("height",pW+"px");
			lh=sItem[0].offsetHeight-3;
			ob=window.innerHeight-document.getElementById("select-menu").offsetTop-lh-3;
			orW.css("margin-top",(sM[0].offsetTop+15)+"px");
			orW.css("height",(ob-30)+"px");
			sM.children("li").find("span").css("line-height",lh+"px");
			sM.css("height",(lh+3)+"px");
			document.getElementById("click-area").style.height=sM[0].offsetTop+"px";
			$(".menu-wrapper").css({"margin-top":lh+"px","height":ob+"px"});
			sM.children("li").on("touchstart",function(){
				var num=$(this).index();
				$(this).children("a").addClass("pressed").find("span").css("line-height",lh+3+"px");
				$("#menu-box").children("div").eq(num).slideDown().siblings().hide();
			})
			sM.children("li").on("touchend",function(){
				$(this).children("a").removeClass("pressed").find("span").css("line-height",lh+"px");
			})
			$("#click-area").on("touchstart",function(){
				$(".menu-wrapper").slideUp();
			})
			//下拉选择
			$(".menu-wrapper span").on("touchstart",function(){
				var sID=$(this).parents(".menu-wrapper")[0].id;
				$(this).addClass("menu-select").parent().siblings().children().removeClass("menu-select");
				$(this).parents(".menu-wrapper").slideUp();
				if(sID!="team"){
					var sW="#"+sID+"-select";
					if(sID=="gender"){$(sW).addClass("spaceS");}
					$(sW).text($(this).text());
				}
			})
			//点赞样例
				//初始化点赞状态
				var selected=[],orNum=orW.children(".or-item").length;
				for(var i=0;i<orNum;i++){
					selected[i]=false;
				}
				//
				support.on("touchstart",function(){
					$(this).toggleClass("ss");
					var sumNode=$(this).children("dd"),posi=$(this).parents(".or-item").index();
					var sum=parseInt(sumNode.text());
					if(!selected[posi]){$(this).children("dt").text("已支持");sumNode.text(sum+1);selected[posi]=true;}
					else{
						$(this).children("dt").text("支持TA");sumNode.text(sum-1);selected[posi]=false;
					}
				})
		</script>
	</body>
</html>
